<template lang="">
    <transition name="todo" appear>
        <li>
            <label>
                <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
                <!-- 
                    不推荐用v-model。因为修改了props,有点违背了原则
                    <input type="checkbox" v-model="todo.done"> 
                -->
                <span v-show="!todo.isEdit">{{todo.title}}</span>
                <input 
                    v-show="todo.isEdit" 
                    type="text" 
                    :value="todo.title" 
                    @blur="handleBlur(todo,$event)"
                    ref="inputVal"
                >
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
            <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
        </li>
    </transition>
</template>
<script>
    import PubSub from 'pubsub-js';
    export default {
        name:"MyItem",
        props:['todo','checkTodo'],
        methods: {
            handleCheck(id){
                console.log(id)
                // 通知App组件将id对应的todo对象的done取反
                this.$bus.$emit('checkTodo',id)
            },
            handleDelete(id){
                console.log(id)
                if(confirm('确定删除吗？')){
                    // this.$bus.$emit('deteleTodo',id)
                    PubSub.publish('deteleTodo',id)
                }
            },
            handleEdit(todo){
                console.log('@@@@',todo.hasOwnProperty('isEdit'))
                if(!todo.hasOwnProperty('isEdit')){
                    this.$set(todo,'isEdit',true)
                }else{
                    todo.isEdit = true 
                }
                this.$nextTick(()=>{
                    this.$refs.inputVal.focus();
                })
            },
            handleBlur(todo,e){
                console.log('@handleBlur')
                todo.isEdit = false 
                if(!e.target.value.trim()) return alert("输入框不能为空")
                this.$bus.$emit('updateTodo',todo.id,e.target.value)
            }
        },
    }
</script>
<style lang="less" scoped>
    li{
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding:0 5px;
        border-bottom: 1px solid #ddd;
    }
    li label{
        float: left;
        cursor: pointer;
    }
    li label li input{
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top:-1px;
    }
    li button{
        float: right;
        display: none;
        margin-top: 3px;
    }
    li:before{
        content: initial;
    }
    li:last-child{
        border-bottom: none;
    }
    li:hover{
        background-color: #ddd;
    }
    li:hover button{
        display: block;
    }
    .todo-enter-active{
        animation: move 0.5s linear;
    }
    .todo-leave-active{
        animation: move 0.5s linear reverse;
    }
    @keyframes move{
        from{
            transform: translateX(100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>